<script setup lang="ts">
import { onMounted, computed, ref } from "vue";
import request from "@/utils/request.ts";
import { ElMessage } from "element-plus";
import { Search } from '@element-plus/icons-vue'
import { require } from "@/utils/getFileUrl.ts";
import { useRouter } from "vue-router";

const router = useRouter();

// 跳转到游戏库页面的方法
const goHome = () => {
  router.push({ path: "/" });
}
const goGamesList = () => {
  router.push({ path: "/gameStore" });
}
/*跳转到登录页面*/
const goLogin = () => {
  window.open(
      router.resolve({ path: "/login"}).href)
}
/*跳转到注册页面*/
const goRegister = () => {
  window.open(
      router.resolve({ path: "/register"}).href)
}
/*显示设置标签*/
let setting = ref(false);
/*跳转到账户页面*/
const goAccount = () => {
  window.open(
      router.resolve({ path: "/account"}).href)
}
/*跳转到游戏账号页面*/
const goUser = () => {
  router.push({ path: "/user" })
}
</script>

<template>
  <div class="top myFlex-y">
    <!-- 上索引 logo 查看 好友 游戏 帮助 以及由此的点击按钮 和登录-->
    <div class="index-top">
      <div class="leftSide ">
        <img class="logo" style="width: 45px;height: 45px" src="@/assets/img/logo.png">
        <div class="shop myFlex-x" @click="goHome">商店</div>
        <div class="store myFlex-x" @click="goGamesList">库</div>
        <div class="id myFlex-x" @mouseenter="setting=true" @mouseleave="setting=false" >
          <span @click="goUser">账户</span>
          <div class="setting myFlex-x" v-show="setting" @click="goAccount">
            <span>账户设置</span>
          </div>

        </div>
      </div>
      <div class="rightSide">
        <el-button class="login" @click="goLogin">登录</el-button>
        <el-button class="register" @click="goRegister">注册</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import "@/assets/css/top.css";
</style>